<template>
    <div class="page-box">
         <div class="page-search">
             <el-row>
              <el-col :span="8">
              <div>
                 <label>工单编码</label>
                 <el-input v-model="searchForm.WorkorderCode" style="width: 160px;"></el-input>
             </div>
              </el-col>
              <el-col :span="8">
             <div>
                 <label>工单名称</label>
                 <el-input v-model="searchForm.WorkorderName" style="width: 160px;"></el-input>
             </div>
              </el-col>
              <el-col :span="8">
              <div>
                  <label>产品编号</label>
                 <el-input v-model="searchForm.ProductCode" style="width: 160px;"></el-input>
             </div>
              </el-col>
  
              <el-col>
             <div>
                 <el-button type="primary" @click="search">查询</el-button>
                 <el-button @click="reset">重置</el-button>
             </div>
              </el-col>
             </el-row>
  
         </div>
         <div class="page-section">
  
             <!--表单-->
             <el-table :data="tableData"  ref="dataForm"   v-loading="isLoading"  height="360">
                 <el-table-column  type="selection" width="55"></el-table-column>
                 <el-table-column  fixed prop="WorkorderCode" label="订单编码" :show-overflow-tooltip="true"></el-table-column>
                 <el-table-column  prop="WorkorderName" label="订单名称" :show-overflow-tooltip="true"></el-table-column>
                 <el-table-column  prop="OrderSource" label="订单来源" :show-overflow-tooltip="true"></el-table-column>
                 <el-table-column  prop="ProductCode" label="产品编号" :show-overflow-tooltip="true"></el-table-column>
                 <el-table-column  prop="ProductName" label="产品名称" :show-overflow-tooltip="true"></el-table-column>
                 <el-table-column  prop="ProductSpc" label="规格型号" :show-overflow-tooltip="true"></el-table-column>
                 <el-table-column  prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                 <el-table-column  prop="BatchCode" label="批次号" :show-overflow-tooltip="true"></el-table-column>
                 <el-table-column  prop="ClientName" label="客户名称" :show-overflow-tooltip="true"></el-table-column>
                 <el-table-column  prop="RequestDate" label="需求日期" :show-overflow-tooltip="true"></el-table-column>
                 <el-table-column  prop="OrderDate" label="生产订单日期" :show-overflow-tooltip="true"></el-table-column>
                 <el-table-column  prop="ProduceDate" label="生产日期" :show-overflow-tooltip="true"></el-table-column>
                 <el-table-column   label="操作" :show-overflow-tooltip="true">
                     <template slot-scope="scope">
                         <el-button type="text" @click="checked(scope.row)">选择</el-button>
                     </template>
                 </el-table-column>
             </el-table>
  
             <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount"/>
         </div>
  
    </div>
  </template>
  <script>
  import Pagination from '@/components/Pagination.vue';
  export default{
     components:{
         Pagination
     },
     mounted(){
         this.dataBind();
     },
     data(){
         return{
  
             //搜索字段
             searchForm:{
              WorkorderCode:'',
              WorkorderName:'',
              ProductCode:'',
              ProductName:'',
              RequestDate:'',
              ClientName:''
             },
  
  
             pageDomain:{
                 PageIndex:1,
                 PageSize:10,
                 TotalCount:0
             },
             tableData:[],
             isLoading:false,
    
  
         }
     },
     methods:{
        checked(model){
            this.$http.get('/api/Item/GetProductBombyId', {
                params: {
                    ItemId: model.ProductId
                }
            })
            .then(res => {
                this.$emit('callback',model,res.Data);
            })
        },
  
         search(){
             this.pageDomain.PageIndex=1;
             this.dataBind();
         },
         reset(){
             this.searchForm.ProcessCode='';
             this.searchForm.ProcessName='';
             this.searchForm.EnableFlag='';
         },
  
         
         //分页方法
         handleSizeChange(val){
             this.pageDomain.PageIndex = 1;
             this.pageDomain.PageSize = val;
             this.dataBind();
         },
         handleCurrentChange(val){
             this.pageDomain.PageIndex = val;
             this.dataBind();
         },
  
  
         //获取数据
         dataBind(){
             this.isLoading=true;
             this.$http.get('/api/ProWorkorder/GetNonPick',
             {
                params:{
                     PageIndex:this.pageDomain.PageIndex,
                     PageSize:this.pageDomain.PageSize,
                     WorkorderCode:this.searchForm.WorkorderCode,
                     WorkorderName:this.searchForm.WorkorderName,
                     ProductCode:this.searchForm.ProductCode,
                     ProductName:this.searchForm.ProductName,
                     ClientName:this.searchForm.ClientName,
                     RequestDate:this.searchForm.RequestDate
  
                }
             })
             .then(res=>{
                 this.tableData=res.Data;
                 this.pageDomain.TotalCount = res.Count;
                 this.isLoading=false;
             })
         }
     }
  }
  </script>
  
  <style scoped>
     
  </style>